<template>
  <div id="subject" class="subject active">
    <div class="active-checkmark"></div>
    <Icon type="android-done"></Icon>
    <div class="subject-close">
      <Poptip
        confirm
        title="删除无法恢复哦！"
        placement="bottom-end"
        @on-ok="handleDel">
        <Icon type="close"></Icon>
      </Poptip>
    </div>

    <Modal
      :closable="false"
      :width="650"
      :mask-closable="false"
      v-model="editorBool"
      :title="modalTitle[modalType]"
      @on-ok="modalAppend"
      @on-cancel="modalCancel">
      <div :id="'editorElem' + index"></div>
    </Modal>


    <div class="title">
      <span class="pull-left num">{{ index + 1 }}</span>
      <div class="pull-left mar-r-20">
        <span>题型：</span>
        <Select v-model="type" style="width:100px">
          <Option v-for="item in subjectTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="pull-left mar-r-20">
        <span>资源编号：</span>
        <span>Q1072830</span>
      </div>

      <div class="pull-left mar-r-20">
        <span>知识点：</span>
        <Select v-model="knowledge" style="width:100px" placeholder="其他">
          <Option v-for="item in knowledgeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>

      <div class="pull-left mar-r-20">
        <InputNumber :max="100" :min="1" v-model="score"></InputNumber>
        <span>分</span>
      </div>

      <div class="pull-right mar-r-20">
        <Button type="success">保存</Button>
      </div>
    </div>

    <div class="question" @click="showModal('question')">
      <div v-if="question" v-html="question"></div>
      <span v-else class="null">还没有题干，点击此处 <span class="text-blue">添加题干</span></span>
    </div>

    <div class="answer" v-if="[1, 2].indexOf(type) != -1">
      <RadioGroup v-model="radioAnswer" vertical>
        <Radio :label="letter[index]" v-for="(item, index) in answer" :key="index">
          <span
            class="null"
            v-if="item === ''"
            @click.stop.prevent="showModal('answer', index)">
            <span>{{letter[index]}}、还未有选项内容，点击此处</span>
            <span class="text-blue">添加内容</span>
          </span>
          <span
            class="answer-item"
            v-else
            @click.stop.prevent="showModal('answer', index)">
            <span>{{letter[index]}}、</span>
            <span v-html="item"></span>
          </span>
          <span @click.stop.prevent="handleDelAnswer(index)"><Icon type="close" class="answer-close"></Icon></span>
        </Radio>
      </RadioGroup>
      <div class="append-answer"><Button @click="handleAppendAnswer" type="text" class="text-blue" icon="plus" size="small">添加一个选项</Button></div>

    </div>

    <div class="line"></div>

    <div class="subject-content">
      <p class="title">解析内容</p>
      <div class="content" @click="showModal('content')">
        <div v-if="content" v-html="content"></div>
        <div v-else><span class="null">还没有解析，点击此处 <span class="text-blue">添加解析</span></span></div>
      </div>
    </div>
  </div>
</template>
<script>
  import E from 'wangeditor'
  import config from '@/lib/config'
  export default{
    mounted() {
      this.editor = new E('#editorElem' + this.index)
      // 自定义菜单配置
      this.editor.customConfig.menus = [
        'image',  // 插入图片
        'video',  // 插入视频
        'link',  // 插入链接
      ]
      this.editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
      this.editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
      this.editor.create()
    },
    props: {
      index: {
        type: Number,
        required: true
      },
      type: [String, Number],
      question: [String, Number],
      content: [String, Number],
      score: [String, Number],
      answer: [Object, Array, String],
      detailedScore: [Object, Array],
      children: [Object, Array],
      status: Boolean,
      subjectObj: {
        type: Object,
        default: {}
      }
    },
    computed: {
      letter() {
        let letter = []
        for(let i=0; i<26; i++) {
          letter.push(String.fromCharCode(65 + i))
        }
        return letter
      }
    },
    watch: {
      type: function (val) {
      },
      subjectObj: {
        handler: function (val, oldVal) {
          console.log(val)
        },
        deep: true
      },
    },
    data() {
      return {
        radioAnswer: null, //单选 正确答案
        answerIndex: null,
        modalTitle: {
          question: '设置题干',
          answer: '设置答案',
          content: '设置解析内容'
        },
        modalType: '',
        editor: null,
        editorContent: '',
        editorBool: false,
        knowledge: 0,
        subjectTypeList: config.subjectTypeList,
        knowledgeList: [{
          label: '组成细胞的分子的构成',
          value: 1
        }],
      }
    },
    methods: {
      //删除大题
      handleDel() {
        this.$emit('on-handleDel', this.index)
      },
      // 清空富文本
      modalCancel() {
        this.editor.txt.clear()
        this.editorContent = ''
      },
      //显示富文本编辑器
      showModal(type, index = null) {
        this.editorBool = true
        this.modalType = type
        switch (type) {
          case 'question':
            this.editorContent = this.question
            break;
          case 'answer':
            this.editorContent = this.resAnswer(index)
            this.answerIndex = index // 将当前点击的索引记录，编辑后需要匹配
            break;
          case 'content':
            this.editorContent = this.content
            break;
          default:
            this.editorContent = ''
            break;
        }
        this.editor.txt.append(this.editorContent)
      },
      // 富文本提交数据
      modalAppend() {
        switch (this.modalType) {
          case 'question':
            this.question = this.editorContent
            break;
          case 'answer':
            this.answer[this.answerIndex] = this.editorContent
            this.answerIndex = null // 还原 answerIndex ，防止出现意外
            break;
          case 'content':
            this.content = this.editorContent
            break;
          default:
            this.editorContent = ''
            break;
        }
        this.editorContent = ''
        this.editor.txt.clear()
      },
      // 编辑问题答案选项时，需要根据type判断选项是数组还是文字
      resAnswer(index) {
        // 单选 多选
        if([1, 2].indexOf(this.type) !== -1) {
          return this.answer[index]
        }
      },
      // 删除 单选 多选 答案选项
      handleDelAnswer(index) {
        //如果删除时，这个选项被选为正确答案，需要清空下正确答案
        if(this.letter[index] === this.radioAnswer) {
          this.radioAnswer = null
        }
        this.answer.splice(index, 1)
      },
      // 添加一个 单选 多选的 答案选项
      handleAppendAnswer() {
        this.answer.push('')
      },

    }
  }
</script>
<style scoped>

  .subject{
    margin-top: 15px;
    background: #fff;
    padding: 5px 20px;
    position: relative;
    overflow: hidden;
    min-height:300px;
  }
  .subject .active-checkmark{
    position: absolute;
    width: 0px;
    height: 0px;
    z-index:1;
    border-width: 0px 0px 30px 30px;
    border-style: solid;
    top: 0px;
    left: 0px;
  }
  .subject-close{
    position: absolute;
    z-index: 2;
    right: 0px;
    top: 0px;
  }
  .subject-close .ivu-icon{
    height: 30px;
    width: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: all 0.45s;
    -moz-transition: all 0.45s; /* Firefox 4 */
    -webkit-transition: all 0.45s; /* Safari and Chrome */
    -o-transition: all 0.45s; /* Opera */
  }
  .subject-close .ivu-icon:hover{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .subject .active-checkmark{
    border-color: transparent #e0e0e0;
  }
  .subject.active .active-checkmark{
    border-color: transparent #55bba4;
  }
  .subject .ivu-icon-android-done{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
    z-index: 2;
    line-height: 18px;
    font-size: 16px;
    padding-left: 5px;
    color: #fff;
  }
  .subject .title{
    height: 50px;
    line-height: 50px;
  }
  .subject .title .num{
    width: 30px;
    font-weight: 500;
    text-align: left;
  }
  .mar-r-20{
    margin-right: 20px;
  }
  .question{
    border: 1px dashed #dddddd;
    padding: 10px 15px;
    background: #fbfeff;
    margin-top: 10px;
    border-radius: 5px;
    line-height: 30px;
  }
  .null{
    cursor: pointer;
  }
  .answer{
    padding: 10px;
  }
  .answer-radio li{
    line-height: 30px;
    height: 30px;
  }
  .answer .answer-close{
    margin-left: 15px;
    display: none;
    height: 100%;
    text-align: center;
    cursor: pointer;
  }
  .answer .ivu-radio-wrapper:hover .answer-close{
    display: inline-block;
  }
  .append-answer{
    margin-top: 5px;
    margin-left: -5px;
  }
  .subject-content{
    padding: 10px;
  }
  .subject-content .title{
    height: 30px;
    line-height: 30px;

  }
  .subject-content .content{
    margin-top: 10px;
  }
  .answer-item *{
    display: inline-block !important;
  }
</style>
